import {useEffect,useState} from 'react';
import Taro from '@tarojs/taro';
import { View, Text ,Image,Input} from '@tarojs/components'
import { connect } from "react-redux";
import {useDidShow} from '@tarojs/taro';
import NavBar from '../../component/navbar/index';
import Styles from './index.module.less';
import Search from '../../images/list/search.png';
import {Request, getGlobalData} from '../../util';
import Goods from '../../component/goods/index';

function index(props){

    const domain = getGlobalData('domain');
    const [treatmentCategoryList, setTreatmentCategoryList] = useState([]);
    const [treatmentList, setTreatmentList] = useState([]);
    const handleSearchInput = (res) => {
        
        Request(domain+"/client/treatment/treatmentListBySearchVal",{searchVal:res.detail.value}).then((res)=>{
            setTreatmentList(res.data.data)
        });
    }

    //获取疗程列表
    const getTreatmentList = () => {
        let categoryName = Taro.getStorageSync("selectedCategory") == "" ? "所有疗程" :Taro.getStorageSync("selectedCategory");
        Request(domain+"/client/treatment/treatmentListByCategoryName",{categoryName:categoryName}).then((res)=>{
            console.log(res);
            setTreatmentList(res.data.data);
        });
    }

    //处理疗程分类按钮的逻辑
    const handleTreatmentCategoryBtn = (categoryName) => {
        //处理分类按钮的样式逻辑
        Taro.setStorageSync("selectedCategory",categoryName);
        var newTreatmentCategoryList = [];
        for( let i in treatmentCategoryList){
            if(treatmentCategoryList[i].name === categoryName){
                treatmentCategoryList[i].style = "backgroundColor:#E6c7c7;"
            }else{
                treatmentCategoryList[i].style = "";
            }
            newTreatmentCategoryList[i] = treatmentCategoryList[i]
        }

        setTreatmentCategoryList(newTreatmentCategoryList)

        //重新获取疗程列表
        getTreatmentList();


    }

    const getCategoryList = () => {
        Request(domain+"/client/treatmentCategory/treatmentCategoryForListPage").then((res)=>{
            let data = res.data.data;
            
            //判断所选的疗程分类是否为空
            let selectedCategory = Taro.getStorageSync("selectedCategory");
            if(selectedCategory){
                for(let i in data){
                    if(data[i].name === selectedCategory){
                        data[i].style = "background-color:#E6c7c7;"
                    }else{
                        data[i].style = ""
                    }
                }
            }else{

                for(let i in data ){
                    if(i==0){
                        data[i].style = "background-color:#E6c7c7;"
                    }else{
                        data[i].style = ""
                    }
                }
            }

    

            setTreatmentCategoryList(data);
        });
    }

    useDidShow(()=>{
        props.sendTabBarID();
        getCategoryList();
        getTreatmentList();
    })

    return (
        <view>
            <NavBar title="疗程服务"/>

            {/* 搜索栏 */}
            <view class={Styles.searchWrap}>
                <Image src={Search} class={Styles.img}/>
                <Input type="text" placeholder="请输入想要了解的疗程" class={Styles.input} placeholderClass={Styles.placeholder} onInput={handleSearchInput}/>
            </view>

            <view class={Styles.treatment_categories_wrap}>
                {
                    treatmentCategoryList.map((item)=>{
                        return (
                            <view class={Styles.treatment_category} style={item.style} onClick={()=>{
                                handleTreatmentCategoryBtn(item.name)
                            }}>
                                {item.name}
                            </view>
                        )
                    })
                }
            </view>

            <view class={Styles.treatmentList_wrap}>
                {
                    treatmentList.map((item)=>{
                        return <Goods name={item.name} mins={item.mins} image={item.thumb_url} price={item.new_price}/>
                    })
                }
            </view>

            
        </view>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendTabBarID:()=>{
            dispatch({
                type:"LIST"
            })
        }
    }
}

export default connect(null, mapDispatchToProps)(index);